<template>
  <van-popup
    v-model:show="showRight"
    position="bottom"
    @click-overlay="clickOverlay"
    :close-on-click-overlay="false"
    :style="{ width: '100%', height: '80%', }"
    round
  >
    <div class="p-2 h-full">
      <div class="mb-2 text-center">
        <span class="font-bold">历史发货人</span>
      </div>
      <div class="pb-[50px]">
        <van-radio-group v-model="checked">
          <div
            v-for="item in list"
            class="mb-2 bg-white rounded-md flex p-3 shadow"
            @click="selectItem(item.id)"
          >
            <van-radio :name="item.id" />
            <div class="flex-1 ml-2">
              <p>
                <span class="font-bold">{{ item.name }}</span
                ><span class="text-blue-500 ml-1">{{ item.phone }}</span>
              </p>
              <p class="text-gray-500 text-sm">
                {{ item.prov }}{{ item.city }}{{ item.area }}{{ item.town
                }}{{ item.address }}
              </p>
              <hr class="mt-1 mb-1" />
              <p>
                <span class="font-bold">{{ item.unitName }}</span>
                <span class="text-blue-500 ml-1">{{ item.unitPhone }}</span>
              </p>
              <p class="text-gray-500 text-sm">{{ item.unitAddress }}</p>
            </div>
          </div>
        </van-radio-group>
      </div>
      <div class="fixed bottom-0 w-full">
        <van-button class="w-full" type="primary" @click="submit"
          >确认</van-button
        >
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import { getSendUserList } from "@/api/user";
import { showToast } from "vant";

const emits = defineEmits(["update:show", "confirm"]);
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});

const showRight = computed(() => props.show);

const list = ref([]);
const checked = ref("");

const selectItem = (id) => {
  checked.value = id
}

const submit = () => {
  if (!checked) {
    return showToast("请选择发货人信息！");
  }
  emits(
    "confirm",
    list.value.find((v) => v.id == checked.value)
  );
  clickOverlay();
};

const clickOverlay = () => {
  emits("update:show", false);
};

onMounted(async () => {
  const { result } = await getSendUserList();
  list.value = result;
});
</script>

<style scoped>
.user-content {

}
</style>
